<template>
    <div class="loginMain">
        <img src="../assets/bgImg.png" alt="" class="bgImg">
        <div class="loginBox">
            <span class="loginTit">{{ loginType == 1 ? '公司' : '业务员' }}后台管理</span>
            <div class="userInfo">账号 <input type="text" v-model="userName">
            </div>
            <div class="userInfo userInfo1 ">密码 <input :type="passFlag ? 'password' : 'text'" v-model="userPass">
                <i class="el-icon-view" @click="passFlag = !passFlag"></i>
            </div>
            <div class="loginBtn" @click="loginHandle">登录</div>
            <el-button class="changeBtn" @click="changeHandle">{{ loginType == 1 ? '业务员' : '公司' }}账号登录</el-button>
        </div>
    </div>
</template>
<script>
import { backLogin } from '../network/login'
export default {
    data() {
        return {
            loginType: 1, // 1: 公司登录, 2: 操作员登录
            userName: '',
            userPass: '',
            passFlag: true
        }

    },
    methods: {

        changeHandle() {
            this.loginType = this.loginType == 1 ? 2 : 1
        },
        loginHandle() {
            console.log(this.userName);
            console.log(this.userPass);

            backLogin({
                userName: this.userName,
                password: this.userPass,
                loginType: this.loginType
            }).then(res => {
                console.log(res.data);
                if (res.flag) {

                    sessionStorage.loginType = this.loginType

                    res.data.menuList.forEach(item => {
                        item.icon = 'el-icon-menu'
                        item.children.forEach(ele => {
                            ele.icon = 'el-icon-s-grid'
                        })
                    })

                    // return
                    if (res.data.productCompany != null) {
                        sessionStorage.companyId = JSON.stringify(res.data.productCompany.companyId)
                        if (res.data.productCompany.companyId == 1) {
                            res.data.menuList = res.data.menuList.filter(item => {
                                return item.menuId != 20
                            })
                        }
                    } else {
                        sessionStorage.companyId = JSON.stringify(res.data.operator.companyId)
                    }


                    console.log(res.data.menuList[0]);
                    console.log(res.data.menuList[0]);
                    console.log(res.data.menuList[0].children);
                    sessionStorage.menulist = JSON.stringify(res.data.menuList)

                    if (sessionStorage.companyId == 1 && this.loginType == 1) {
                        // 推广公司登录
                        this.$router.replace('/homePage')
                        sessionStorage.setItem('activePath', '/homePage')
                    } else {
                        // 业务员登录
                        this.$router.replace(`${res.data.menuList[0].children[0].menuUrl}`)
                        sessionStorage.setItem('activePath', `${res.data.menuList[0].children[0].menuUrl}`)
                    }



                } else {
                    this.$message.warning(res.message)
                }

            })
        },
        Login() {

        },

    }
}
</script>
<style lang="less" scoped>
.bgImg {
    position: absolute;
    top: 280px;
    left: 400px;
    width: 355px;
    height: 346px;
}

.loginMain {
    position: relative;
    width: 100%;
    height: 100vh;
    background: url(../assets/lob.png);
    background-size: 100% 100%;
}

.loginBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 200px;
    left: 1076px;
    width: 350px;
    height: 500px;
    background: #FFFFFF;
    border-radius: 10px;

    .loginTit {
        margin: 60px auto 40px;
        font-size: 26px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
    }

    .userInfo {
        position: relative;
        margin: 20px auto;
        // position: absolute;
        // top: 146px;
        // left: 36px;
        font-size: 24px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;

        i {
            position: absolute;
            top: 6px;
            right: 10px;
        }

        input {
            margin-left: 10px;
            box-sizing: border-box;
            padding-left: 20px;
            width: 216px;
            height: 36px;
            border: 1px solid #348AFF;
            border-radius: 5px;
            outline: none;
            font-size: 24px;
        }

        span {
            // position: absolute;
            // bottom: -24px;
            // left: 88px;
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #FB4646;
        }
    }

    .userInfo1 {
        position: relative;
    }

    .loginBtn {
        margin-top: 40px;
        // position: absolute;
        // bottom: 120px;
        // left: 35px;
        width: 280px;
        height: 50px;
        background: #348AFF;
        border-radius: 5px;
        font-size: 24px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 50px;
        text-align: center;
        cursor: pointer;
    }
}

.changeBtn {
    margin-top: 60px;
}
</style>
